$themes: (
  light: (
    backgroundColor: $bg-nude,
    borderColor: $medium-gray,

    cardBackgroundColor: $white-bg,
    cardTitleColor: $black-color,
    cardLabelColor: $dark-gray,
    cardTextColor: $font-color,
    cardTableColor: $smoke-bg,
    cardTransactionTableColor: $white-bg,

    navbarBackgroundColor: $bg-nude,
    navbarBorderColor: $medium-gray,
    navbarTextColor: $black-color,
    navbarIconColor: $black-color,

    sidebarBackgroundColor: #212529,
    sidebarTextColor: $medium-gray,
    sidebarArrowColor: $bg-nude,

    inputBackgroundColor:$gray-input-bg,
    inputBorderColor: $medium-gray,
    inputAppendBorderColor: $medium-dark-gray,
    inputPlaceholderColor: $light-gray,
    inputTextColor: $font-color,
    inputDisabledBackgroundColor: $light-gray,
    inputDisabledTextColor: $medium-dark-gray,

    chartTextColor: $ct-text-color,
    chartGridColor: $ct-grid-color,
    chartSeriesALineColor: $info-color,
    chartSeriesAFIllColor: rgba($info-color, .8),
    chartSeriesBLineColor: $success-color,
    chartSeriesBFIllColor: rgba($success-color, .8),
    chartSeriesCLineColor: $secondary-color,
    chartSeriesCFIllColor: rgba($secondary-color, .8),
    pieSeriesAFillColor: $info-color,
    pieSeriesBFillColor: $success-color,
    pieSeriesCFillolor: $secondary-color,

    errorTextColor: firebrick,
    walletAddressColor: $medium-dark-gray,

    popupBackgroundColor: $bg-nude,

    primaryColor: $primary-color,
    primaryStatesColor: $primary-states-color,
    secondaryColor: $secondary-color,
    secondaryStatesColor: $secondary-states-color,
    infoColor: $info-color,
    infoStatesColor: $info-states-color,
    successColor: $success-color,
    successStatesColor: $success-states-color,
    warningColor: $warning-color,
    warningStatesColor: $warning-states-color,
    dangerColor: $danger-color,
    dangerStatesColor: $danger-states-color
  ),
  dark: (
    backgroundColor: #121212,
    borderColor: #2E2E2E,

    cardBackgroundColor: #181818,
    cardTitleColor: $light-gray,
    cardLabelColor: #AFAFAF,
    cardTextColor: #BCBCBC,
    cardTableColor: #202020,
    cardTransactionTableColor: #202020,

    navbarBackgroundColor: #1d1d1d,
    navbarBorderColor: #272727,
    navbarTextColor: #BCBCBC,
    navbarIconColor: $info-color,

    sidebarBackgroundColor: #181818,
    sidebarTextColor: #BCBCBC,
    sidebarArrowColor: #121212,

    inputBackgroundColor:#272727,
    inputBorderColor: $dark-gray,
    inputAppendBorderColor: $dark-gray,
    inputPlaceholderColor: $medium-gray,
    inputTextColor: #F2F2F2,
    inputDisabledBackgroundColor: #2E2E2E,
    inputDisabledTextColor: $medium-dark-gray,

    chartTextColor: #BCBCBC,
    chartGridColor: #2E2E2E,
    chartSeriesALineColor: $info-color-dark,
    chartSeriesAFIllColor: rgba($info-color-dark, .2),
    chartSeriesBLineColor: rgba($success-color-dark, .5),
    chartSeriesBFIllColor: rgba($success-color-dark, .2),
    chartSeriesCLineColor: rgba($secondary-color-dark, .5),
    chartSeriesCFIllColor: rgba($secondary-color-dark, .2),
    pieSeriesAFillColor: $info-color-dark,
    pieSeriesBFillColor: $success-color-dark,
    pieSeriesCFillColor: $secondary-color-dark,

    errorTextColor: orangered,
    walletAddressColor: #BCBCBC,

    popupBackgroundColor: #272727,

    primaryColor: $primary-color-dark,
    primaryStatesColor: $primary-states-color-dark,
    secondaryColor: $secondary-color-dark,
    secondaryStatesColor: $secondary-states-color-dark,
    infoColor: $info-color-dark,
    infoStatesColor: $info-states-color-dark,
    successColor: $success-color-dark,
    successStatesColor: $success-states-color-dark,
    warningColor: $warning-color,
    warningStatesColor: $warning-states-color,
    dangerColor: $danger-color,
    dangerStatesColor: $danger-states-color
  ),
);

@mixin themed() {
    @each $theme, $map in $themes {
      .theme--#{$theme} & {
        $theme-map: () !global;
        @each $key, $submap in $map {
          $value: map-get(map-get($themes, $theme), '#{$key}');
          $theme-map: map-merge($theme-map, ($key: $value)) !global;
        }
        @content;
        $theme-map: null !global;
      }
    }
  }
  
  @function t($key) {
    @return map-get($theme-map, $key);
  }